<div class="card-head"><h4>更新用户组</h4></div>
<div class="card-block bg-white">
  <div class="block">
    <h4>基本信息</h4>
    <div class="row">
      <div class="col-md-2">
        <span>名称</span> <span class="font-red">*</span>
      </div>
      <div class="col-md-10">
        <input type="text" [(ngModel)]="data.name" class="width-full input" placeholder="请输入 1 - 80 个字符作为用户组标题"/>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2">
        <span>描述</span>
      </div>
      <div class="col-md-10">
        <textarea style="resize: none" [(ngModel)]="data.remark" type="text" rows="8" class="width-full input" placeholder="">
        </textarea>
      </div>
    </div>
    <div style="text-align: center;margin-top: 1.25rem">
      <button class="btn btn-primary"  (click)="update()">更新</button>
    </div>
  </div>
  <div class="block">
    <h4>题目集</h4>
    <div class="box" style="margin-top: 1.25rem">
      <div class="box-body no-padding">
        <table class="table table-striped">
          <tr>
            <th style="width:40%;">题目集</th>
            <th style="width:30%;">权限</th>
            <th style="width:30%;">操作</th>
          </tr>
          <tr *ngFor="let d of addedProblemSetInfos; let i = index;">
            <td><a href="#">{{d.name}}</a></td>
            <td>All</td>
            <td><a [name]="d.code" href="javascript:;" (click)="deleteProblemSet($event)">删除</a></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="addBtn" (click)="showAddProblemSet()">
      <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40"
           style="vertical-align: middle;">
        <g>
          <path
            d="m35.9 16.4v4.3q0 0.9-0.6 1.5t-1.5 0.7h-9.3v9.2q0 0.9-0.6 1.6t-1.5 0.6h-4.3q-0.9 0-1.5-0.6t-0.7-1.6v-9.2h-9.3q-0.9 0-1.5-0.7t-0.6-1.5v-4.3q0-0.9 0.6-1.5t1.5-0.6h9.3v-9.3q0-0.9 0.7-1.5t1.5-0.6h4.3q0.9 0 1.5 0.6t0.6 1.5v9.3h9.3q0.9 0 1.5 0.6t0.6 1.5z"></path>
        </g>
      </svg>
    </div>
  </div>

  <!--<div class="block">
    <h4>邀请码</h4>
    <div class="box" style="margin-top: 1.25rem">
      <div class="box-body no-padding">
        <table class="table table-striped">
          <tr>
            <th style="width:40%;">邀请码</th>
            <th style="width:30%;">创建时间</th>
            <th style="width:30%;">操作</th>
          </tr>
          <tr *ngFor="let d of addedPinCodeInfos; let i = index;">
            <td>{{d.code}}</td>
            <td>{{d.time}}</td>
            <td><a [name]="d.code" href="javascript:;" (click)="deletePinCode($event)">删除</a></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="addBtn" (click)="addPinCode()">
        <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40"
             style="vertical-align: middle;">
          <g>
            <path
              d="m35.9 16.4v4.3q0 0.9-0.6 1.5t-1.5 0.7h-9.3v9.2q0 0.9-0.6 1.6t-1.5 0.6h-4.3q-0.9 0-1.5-0.6t-0.7-1.6v-9.2h-9.3q-0.9 0-1.5-0.7t-0.6-1.5v-4.3q0-0.9 0.6-1.5t1.5-0.6h9.3v-9.3q0-0.9 0.7-1.5t1.5-0.6h4.3q0.9 0 1.5 0.6t0.6 1.5v9.3h9.3q0.9 0 1.5 0.6t0.6 1.5z"></path>
          </g>
        </svg>
    </div>
  </div>-->

  <div class="block">
    <h4>添加学生用户</h4>
    <p>每个学生一行，每行包含学号和真实姓名，用空格隔开。</p>
    <p>学生可通过验证码 <span class="code">{{data.checkCode}}</span>将学号绑定到个人账户。</p>
    <textarea [(ngModel)]="addUserText" style="resize: none" type="text" rows="8" class="width-full input" placeholder=""></textarea>
    <div style="text-align: center;margin-top: 1.25rem">
      <button class="btn btn-primary" (click)="addUser()">添加</button>
    </div>
  </div>

  <div class="block">
    <div class="form-group" style="margin-top: 1.25rem">
      <div>
        <h4 style="float: left;height: 34px;padding: 0px;margin: 0px;line-height: 34px;">用户列表(共{{addedUserInfo.length}}人)</h4>
        <a href="http://localhost:12002/services/auth/expertMark/{{code}}" style="float: left;height: 34px;text-align: center;line-height: 28px;margin-left: 10px;" class="btn btn-outline-info btn-sm">导出全部成绩单</a>
        <div style="display: flex;float: right">
          <div><button class="btn btn-secondary" style="border-bottom-right-radius: 0;border-top-right-radius: 0;">学号</button></div>
          <input type="text" class="from-input" style="border-left: 0px;border-right: 0px;">
          <div><button class="btn btn-secondary" style="border-bottom-left-radius: 0;border-top-left-radius: 0;">搜索</button></div>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
    <div class="box" style="margin-top: 1.25rem">
      <div class="box-body no-padding">
        <table class="table table-striped">
          <tr>
            <th>学号</th>
            <th>用户</th>
            <th>邮箱</th>
            <th>操作</th>
          </tr>

          <tr *ngFor="let d of addedUserInfo; let i = index;">
            <td>{{d.studentNumber}}</td>
            <td>{{d.name}}</td>
            <td>{{d.email}}</td>
            <td><a [name]="d.code" href="javascript:;" (click)="deleteUser($event)">删除</a></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
<p-dialog [(visible)]="addProblemSetFlag" [modal]="true" [responsive]="true" [width]="450" [minWidth]="200" [minY]="70">
  <p-header>
    添加题目集
  </p-header>
    <div class="row">
      <div class="col-md-2 input-label">题目集</div>
      <div class="col-md-10">
        <select [(ngModel)]="addProblemSetCode" class="width-full input">
          <option *ngFor="let d of problemSetInfos; let i = index;" [value]="d.code">{{d.name}}</option>
        </select>
      </div>
    </div>
  <p-footer>
    <button class="btn btn-success" (click)="addProblemSet()">确认</button>
  </p-footer>
</p-dialog>


